<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons/layui/css/layui.css">
    <script src="commons/layui/layui.js"></script>
</head>
<body >
<!--引用区域的文字-->
<blockquote class="layui-elem-quote">
<!--    表单区域-->
    <form class="layui-form" action="">
        <div class="layui-form-item">
<!--员工姓名输入框-->
            <div class="layui-inline">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-inline" style="width: 200px;">
                    <input type="text" name="ename" placeholder="员工姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
<!--            部门选择框-->
            <div class="layui-inline">
                <label class="layui-form-label">员工部门</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required" style="width: 200px;height: 32px">
                        <option value=""></option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
            </div>
<!--            按钮-->
            <button type="button" class="layui-btn">查询</button>
            <button type="button" class="layui-btn layui-btn-normal">添加</button>

        </div>
    </form>
</blockquote>

<!--表格-->
<table id="empList" lay-filter="test"></table>


<script>
    layui.use(['table','form'], function(){
        let table = layui.table,
            form =layui.form;

        //第一个实例
        table.render({
            elem: '#empList'
            // ,height: 312
            ,url: 'emp/page' //数据接口
            ,page: true //开启分页
            ,request:{
                pageName:'pageIndex',
                limitName:'pageSize'
            },
            response:{
                statusCode:200,//响应成功
                countName:'total'//数据条数名字
            }
            ,cols: [[ //表头
                {field: 'empno', title: '员工编号',  sort: true, }
                ,{field: 'ename', title: '员工姓名'}
                ,{field: 'job', title: '岗位'}
                ,{field: 'mgr', title: '薪资'}
                ,{field: 'hiredate', title: '入职日期'}
                ,{field: 'sal', title: '薪资',  sort: true}
                ,{field: 'comm', title: '奖金',  sort: true}
                ,{field: 'deptno', title: '部门编号'}
            ]]
        });

    });
</script>

</body>
</html>